<template>
  <div class="hello">

    <div class="tanchuang" v-if="yinchang">
        <div class="gengxin">
          <div class="top">
            更新
          </div>
          <div class="center">
            <p><span>满意行V{{xinban}}新特性:</span></p>
            <p v-for="(item,index) in tuijia" :key="item"><label>{{index+1}}、</label>{{item.jianjie}}</p>
          </div>
          <div class="bottom">
            提示：如果不更新 ，将无法使用新添功能
          </div>
          <div class="anniu">
            <div class="left"  @click="yinchang=false">取消</div>
            <div class="right">立即更新</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import headerjifen from './jifen'
export default {
  props:[yinchang],
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fen: {
        jifen: '500'
      },
      yinchang: true,
      banben: '0.9.0',
      xinban: '0.9.0',
      tuijia: [
        {name: '充值卡', jianjie: '沟通你我', kucun: '100'},
        {name: '充卡', jianjie: '沟我', kucun: '10'},
        {name: '卡', jianjie: '沟我', kucun: '150'},
        {name: '充卡', jianjie: '沟通我', kucun: '1800'}

      ]
    }
  },
  methods: {
    cancel () {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
.tanchuang{
    height: 100%;
    width: 100%;
    position: absolute;
    
    top: 0;
    display: flex;
    
    .gengxin{
      background: #fff;
      width: 75%;
      margin:  auto;
      opacity: 1;
      .padding(60,60,60,60);
      .border-radius(10);
      .top{
        .font-size(36);

      }
      .center{
         .padding(60,0,60,0);
        .line-height(50);
        .font-size(36);
        p{
          color:#646464;
          span{
            color:black;
          }
        }
      }
      .bottom{
        .font-size(30);
        .padding(0,0,50,0);
      }
      .anniu{
        display: flex;
        justify-content: center;
        .left{
          .margin(0,20,0,0);
          .width(150);
          .line-height(70);
          .font-size(30);
          text-align: center; 
          border:2px solid black;
        }
        .right{
          .font-size(30);
          .width(150);
          .line-height(70);
          color:#fff;
          text-align: center; 
          background: #e93f33;
          border:2px solid #e93f33;
        }

      }
    }
  }

</style>
